<template>
  <div class="vm-workBench-container">
    <div class="vm-workBench-item">
      <div class="vm-item-header">
        <h5>
          <em class="line" :style="'background-color:' + vmCommonLevelItem.lineC+ ';'"></em>
          {{ vmCommonLevelItem.title }}
        </h5>
      </div>
      <div class="vm-item-body">
        <ul>
          <router-link tag="li" :class="{'mt0':key >=4 }" :to="item.router" v-for="(item, key) in vmCommonLevelItem.data" :key="key" v-if="item.show == true">
            <i :class="['vm-icon',item.iconClass]"></i>
            <p>{{ item.dTitle }}</p>
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      authorityAllData: window.localStorage.getItem('authorityAll') ? JSON.parse(window.localStorage.getItem('authorityAll')) : null
    }
  },
  props: ["vmCommonLevelItem"],
  created () {
    console.log(this.screenLevelItem);
  },
  computed: {
    screenLevelItem() {
      /*
      *  三级权限判断，取出当前分类的数据，拿出parentCode。
      *  取本地localStorage数据，使用filter取出一级分类的当前数组权限表。
      *  循环本地权限表对应一级下的三级数据，三级的code和当前的childCode验证,相等则有权限,给对应该数组添加show属性为true
      * */
      // 当前列表的一级code
      let curParentsCode = this.vmCommonLevelItem.parentCode,
          curParentCode = this.vmCommonLevelItem.code,
          authorityAllData = this.authorityAllData,
          vmCommonLevelItem = this.vmCommonLevelItem;
      let curParentsNodeItem = authorityAllData.filter(item => Object.is(item.code, curParentsCode));
      let curParentNodeItem = curParentsNodeItem[0].child.filter(item => Object.is(item.code, curParentCode));
      curParentNodeItem[0].child.forEach(item => {
        let _item = item;
        vmCommonLevelItem.data.forEach(item => {
          if (Object.is(_item.code, item.childCode)) {
            item.show = true;
          }
        });
      });
      return vmCommonLevelItem;
    }
  }
}
</script>

<style scoped lang="scss">
  .vm-workBench-item {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    h5 {
      display: flex;
      align-items: center;
      color: #141414;
      font-weight: bold;
      font-size: 28px;
      .line {
        content: '';
        height: 24px;
        width: 6px;
        display: inline-block;
        margin-right: 15px;
      }
    }
    .vm-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 70px;
      width: 100%;
      padding-left: 10px;
      /*border-bottom: 1px solid #e1e1e1; !* no *!*/
      .add {
        width: 20px; /* no */
        height: 20px; /* no */
        margin-right: 30px;
        img {
          width: 100%;
        }
      }
    }
    .vm-item-body {
      min-height: 187px;
      width: 100%;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e1e1e1; /* no */
      ul {
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        li {
          width: 25%;
          height: 150px;
          margin: 50px 0;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-around;
          p {
            font-size: 24px;
            color: #333333;
          }
          &.mt0 {
            margin-top: 0;
          }
          &.addRectangle {
            background: url(../../../static/images/rectangle.png) no-repeat;
            background-size: 145px 125px;
            background-position: center;
          }
          i.vm-icon {
            width: 92px;
            height: 92px;
            display: inline-block;
          }
          /* 信息汇总 */
          i.vm-icon.Summary {
            background-position: -379px -622px;
          }
          /* 状态管理 */
          i.vm-icon.statusHandle {
            background-position: -285px -904px;
          }
          /* 审核公告 */
          i.vm-icon.examineNotice{
            background-position: -191px -622px;
          }
          /* 资格预审 */
          i.vm-icon.prequalification {
            background-position: -473px -904px;
          }
          /* 发布标书 */
          i.vm-icon.publication {
            background-position: -97px -622px;
          }
          /* 投标管理 */
          i.vm-icon.bidding  {
            background-position: -473px -810px;
          }
          /* 评标设置 */
          i.vm-icon.bidSetting {
            background-position: -191px -904px;
          }
          /* 中标查看 */
          i.vm-icon.Winbid {
            background-position: -473px -622px;
          }
          /* 中标公示 */
          i.vm-icon.bidPublicity {
            background-position: -379px -904px;
          }
          /* 招标完成 */
          i.vm-icon.Completion {
            background-position: -473px -810px;
          }
          /* 结果公示 */
          i.vm-icon.resultNotice {
            background-position: -379px -904px;
          }
          /* 询价列表 */
          i.vm-icon.inquiryList {
            background-position: -285px -622px;
          }
          /* 公告列表 */
          i.vm-icon.noticeList {
            background-position: -97px -904px;
          }
          /* 谈判列表 */
          i.vm-icon.negotiationList {
            background-position: -285px -810px;
          }
          /* 到货单 */
          i.vm-icon.billGoods {
            background-position: -97px -716px;
          }
          /* 待检单 */
          i.vm-icon.checkList {
            background-position: -191px -810px;
          }
          /* 质检单 */
          i.vm-icon.qualityCheckList {
            background-position: -473px -716px;
          }
          /* 退货单 */
          i.vm-icon.returnBill {
            background-position: -285px -716px;
          }
          /* 入库管理 */
          i.vm-icon.warehousingHandle {
            background-position: -191px -716px;
          }
          /* 出库管理 */
          i.vm-icon.OutHandle {
            background-position: -3px -622px;
          }
          /* 仓库列表 */
          i.vm-icon.warehouseList {
            background-position: -3px -810px;
          }
          /* 仓库盘点 */
          i.vm-icon.warehouseInventory {
            background-position: -3px -904px;
          }
          /* 仓库调拨 */
          i.vm-icon.OutHandleAllocation {
            background-position: -3px -716px;
          }
        }
      }
    }
  }
</style>
